<template>
  <div>
    <el-container>
      <el-header>
        <div class="logo-container">
          <img src="@/assets/11.jpg" alt="Logo" class="logo" style="top: auto;height: 50px;width: 50px" />
          <span class="logo-text" style="font-size: large;color: #545c64">上善若水-颐养中心后台管理系统</span>

        </div>
        <div>{{ nickName }}{{ timeOfDay }}好！现在是 {{ currentTime }}</div>
        <div style="float: right;">
          <el-dropdown @command="handleCommand" >
            <span class="el-dropdown-link" >
              更多操作<i class="el-icon-arrow-down el-icon--right" ></i>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="editProfile">修改个人信息</el-dropdown-item>
                <el-dropdown-item command="logout">系统登出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside style="width: 180px">
          <Left_menu/>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import Left_menu from "@/components/frame/left_menu.vue";
import { useRouter } from "vue-router";
import { ref, onMounted } from 'vue';


// 从 sessionStorage 中获取 nickName
const nickName = ref(sessionStorage.getItem('nickName') || history?.state?.nickname);

// 如果 history.state 中有 nickName，则保存到 sessionStorage 中
onMounted(() => {
  if (history?.state?.nickname) {
    sessionStorage.setItem('nickName', history?.state?.nickname);
  }

  updateTime();
  // 每分钟更新一次时间
  setInterval(updateTime, 60000);
});


const router = useRouter();

const handleCommand = (command) => {
  switch (command) {
    case "editProfile":
      router.push({ path: "/EditPim" });
      break;
    case "systemInfo":
      //router.push({ path: "/systemInfo" });
      alert("系统开发中...");
      break;
    case "logout":
      router.push({ path: "/login" });
      break;
  }
}

// 获取当前时间
const currentTime = ref('');
const timeOfDay = ref('');

// 更新时间的函数
function updateTime() {
  const now = new Date();
  const hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}`;

  // 判断时间段
  if (hours >= 0 && hours < 12) {
    timeOfDay.value = '上午';
  } else if (hours >= 12 && hours < 18) {
    timeOfDay.value = '下午';
  } else {
    timeOfDay.value = '晚上';
  }
}

</script>

<style scoped>
@import '../../styles/main.css';
</style>